<template>
    <div>
        <el-card style="width: auto;">
            <el-form :model="info" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="投入品图片" prop="variableInputPicUrl">
                    <mysend :picUrl="info.variableInputPicUrl" @getUrl="getMypic" />
                </el-form-item>
                <el-form-item label="投入品名称" prop="variableInputName" style="width: 320px;" >
                    <el-input type="text" v-model="info.variableInputName" placeholder="请输入投入品名称" />
                </el-form-item>
                <el-form-item label="投入品数量" prop="variableInputNum" style="width: 320px;" >
                    <el-input type="number" v-model="info.variableInputNum" placeholder="请输入投入品数量">
                        <template slot="append">kg</template>
                    </el-input>
                </el-form-item>
                <div></div>
                <el-form-item label="投入品类别" prop="variableInputType" style="width: 320px;">
                    <el-select v-model="info.variableInputType" placeholder="请选择投入品类别">
                        <el-option v-for="(item,index) in options" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="submitForm('ruleForm')" type="success" >保存</el-button>
                    <el-button @click="$router.go(-1)" type="success"  plain>返回</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import { findVariableInputType,addVariableInput } from '../util/api.js'
export default {
    data() {
        return {
            info: {
                variableInputId: '',
                variableInputPicUrl: "",
                variableInputType: "",
                variableInputName: "",
                variableInputNum:""
            },
            options: [],
            rules: {
                variableInputName: [
                    { required: true, message: '请输入投入品名称', trigger: 'blur' },
                ],
                variableInputNum: [
                    { required: true, message: '请输入投入品数量', trigger: 'blur' },
                ],
                variableInputPicUrl: [
                    { required: true, message: '请至少选择一张图片', trigger: 'blur' }
                ],
                variableInputType: [
                    { required: true, message: '请选择类别', trigger: 'change' }
                ],
            }
        }
    },
    mounted() {
        this.findVariableInputType()
        if (JSON.stringify(this.$route.query) != '{}') {
            this.info = this.$route.query
        } else {
            delete this.info.variableInputId
        }
        // console.log(this.info)
        
    },
    methods: {
        async findVariableInputType() {
            let res = await findVariableInputType()
            if (res.code != 200) return
            // console.log(res)
            this.options = res.data
        },
        getMypic(res) {
              if(res){
                  this.info.variableInputPicUrl = res   
              }
        },
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let res = await addVariableInput(this.info)
                    // console.log(res)
                    if(res.code!=200)return
                    this.$message.success('更改成功！')
                    this.$router.go(-1)
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
    }
}
</script>